<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            gap: 20px;
            padding: 20px;
        }
        .column {
            width: 200px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
            max-height: 400px;
            overflow-y: auto;
        }
        .item {
            padding: 8px;
            margin: 4px 0;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
        }
        .item:hover {
            background: #f0f0f0;
        }
        .selected {
            background: #409eff;
            color: white;
        }
        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .action-bar {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }
        button {
            padding: 8px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 省份列 -->
        <div class="column" id="province-column">
            <div class="title">选择省份</div>
        </div>
        
        <!-- 城市列 -->
        <div class="column" id="city-column">
            <div class="title">选择城市</div>
        </div>
        
        <!-- 区县列 -->
        <div class="column" id="district-column">
            <div class="title">选择区县</div>
            <div class="select-all checkbox-item">
                <input type="checkbox" id="select-all">
                <label for="select-all">全部</label>
            </div>
        </div>
    </div>

    <div class="action-bar">
        <button onclick="resetAll()">重置</button>
        <button onclick="confirmSelection()">完成</button>
    </div>

    <script>
        // 测试数据
        const regionData = [
            {   
                name: '四川省',
                cities: [
                    {
                        name: '成都市',
                        districts: ['全部','锦江区','青羊区','成华区','武侯区','金牛区','高新区','天府新区','双流区']
                    },
                    {
                        name: '绵阳市',
                        districts: ['涪城区','游仙区','安州区','三台县']
                    }
                ]
            },
            {
                name: '黑龙江省',
                cities: [
                    {
                        name: '哈尔滨市',
                        districts: ['道里区','南岗区','道外区','平房区']
                    }
                ]
            }
        ];

        let selected = {
            province: null,
            city: null,
            districts: []
        };

        // 初始化
        function init() {
            renderProvinces();
            bindEvents();
        }

        // 渲染省份列
        function renderProvinces() {
            const container = document.getElementById('province-column');
            container.innerHTML = '<div class="title">选择省份</div>' + 
                regionData.map(p => `
                    <div class="item" data-name="${p.name}">${p.name}</div>
                `).join('');
        }

        // 渲染城市列
        function renderCities(provinceName) {
            const container = document.getElementById('city-column');
            const province = regionData.find(p => p.name === provinceName);
            container.innerHTML = '<div class="title">选择城市</div>' + 
                province.cities.map(c => `
                    <div class="item" data-name="${c.name}">${c.name}</div>
                `).join('');
        }

        // 渲染区县列
        function renderDistricts(cityName) {
            const container = document.getElementById('district-column');
            const city = regionData
                .find(p => p.name === selected.province)
                .cities.find(c => c.name === cityName);
            
            container.innerHTML = `
                <div class="title">选择区县</div>
                <div class="select-all checkbox-item">
                    <input type="checkbox" id="select-all">
                    <label for="select-all">全部</label>
                </div>
                ${city.districts.map(d => `
                    <div class="checkbox-item">
                        <input type="checkbox" value="${d}">
                        <label>${d}</label>
                    </div>
                `).join('')}
            `;
        }

        // 事件绑定
        function bindEvents() {
            // 省份点击
            document.getElementById('province-column').addEventListener('click', e => {
                const item = e.target.closest('.item');
                if(item) {
                    selected.province = item.dataset.name;
                    document.querySelectorAll('#province-column .item').forEach(el => 
                        el.classList.remove('selected'));
                    item.classList.add('selected');
                    renderCities(selected.province);
                }
            });

            // 城市点击
            document.getElementById('city-column').addEventListener('click', e => {
                const item = e.target.closest('.item');
                if(item) {
                    selected.city = item.dataset.name;
                    document.querySelectorAll('#city-column .item').forEach(el => 
                        el.classList.remove('selected'));
                    item.classList.add('selected');
                    renderDistricts(selected.city);
                }
            });

            // 区县选择
            document.getElementById('district-column').addEventListener('change', e => {
                if(e.target.type === 'checkbox') {
                    const isAll = e.target.value === '全部';
                    const checkboxes = [...document.querySelectorAll('#district-column input')];
                    
                    if(isAll) {
                        checkboxes.forEach(cb => cb.checked = e.target.checked);
                    } else {
                        const allChecked = checkboxes
                            .filter(cb => cb.value !== '全部')
                            .every(cb => cb.checked);
                        checkboxes[0].checked = allChecked;
                    }
                    
                    updateSelectedDistricts();
                }
            });
        }

        // 更新已选区县
        function updateSelectedDistricts() {
            const checkboxes = [...document.querySelectorAll('#district-column input:checked')];
            selected.districts = checkboxes
                .filter(cb => cb.value !== '全部')
                .map(cb => cb.value);
        }

        // 重置
        function resetAll() {
            selected = { province: null, city: null, districts: [] };
            document.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));
            document.getElementById('city-column').innerHTML = '<div class="title">选择城市</div>';
            document.getElementById('district-column').innerHTML = '<div class="title">选择区县</div>';
        }

        // 完成选择
        function confirmSelection() {
            console.log('当前选择:', selected);
            alert(`已选择：${selected.districts.join(', ') || '无'}`);
        }

        // 初始化
        window.onload = init;
    </script>
</body>
</html>